<%@page import="com.yunzhong.appointment.config.SessionConst"%>
<%@page import="com.yunzhong.appointment.entity.SysMenu"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.yunzhong.appointment.config.Const"%>
<%@page import="org.apache.shiro.subject.Subject"%>
<%@page import="org.apache.shiro.SecurityUtils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file="common/common.jsp" %>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
		<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
		<title>云众科技网上预约挂号系统</title>
	</head>
	<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
	<!--引用百度地图API-->
	<style type="text/css">
		html body{
			width: 100%;margin:0;padding:0;
		}
		.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
	    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
		.kuang{
			border:1px solid gainsboro;
			/*圆角*/
			border-radius: 10px ;
			margin: 0px;
		}
	</style>
	<body>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日14:12:50
        	描述：个人中心	联系我们	登录	注册
        -->
		<div class="container">
			<nav class="nav navbar-default navbar-fixed-top container-fluid" role="navigation" style="background-color:aquamarine;">
				<div class="nav navbar-header">
					<!-- 导航头 -->
					<a class="navbar-brand" href="#">云众科技</a>
					<button class="navbar-toggle" data-toggle= "collapse" data-target="#mynav">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="mynav">
					<!-- 导航内容 -->
					<ul class="nav navbar-nav">
						<li><a href="">联系电话：0451-87362836</a></li>
						<!-- 下面的代码需要登录后才能显示 -->
						<shiro:authenticated>
						<%
						 	Subject currentUser = SecurityUtils.getSubject();
							String userName = (String)currentUser.getSession().getAttribute(SessionConst.SESSION_USERNAME);
							SysMenu personalMenu = (SysMenu)currentUser.getSession().getAttribute(SessionConst.SESSION_PERSONAL_MENU);
						%>
							<li><a href="javascript:showMenu('<%=personalMenu.getMenuId()%>')">个人中心</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-user"></span>欢迎您：<%=userName %></a></li>
						</shiro:authenticated>
						
					</ul>
					<!-- 导航尾，登录后不再显示 -->
					<shiro:notAuthenticated>
						<div class="nav navbar-right">
							<ul class="nav navbar-nav">
								<li><a href="/login">登录</a></li>
								<li><a href="/register/pageRegister">注册</a></li>
							</ul>
						</div>
					</shiro:notAuthenticated>
				</div>
			</nav>
		</div>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日14:32:38
        	描述：项目名称   搜索框 （搜索框只有游客或患者可见）
        -->
		<div class="container" style="margin-top: 50px;">
			<div class="col-sm-6" >
				<h2 class="text-primary" >云众科技网上预约挂号系统</h2>
			</div>
			<shiro:guest>
				<div class="col-sm-6" style="margin-top: 15px;">
					<form method="post" name="form1" class="form form-horizontal">
						<div class="input-group">
					      	<div class="input-group-btn">
						        <button id="index_search_btn" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">${sessionScope.illnessName!=null && sessionScope.illnessName!=""?"疾病":"科室" }<span class="caret"></span></button>
						        <ul class="dropdown-menu" role="menu">
						          <li><a href="javascript:searchType('科室')">科室</a></li>
						          <li><a href="javascript:searchType('疾病')">疾病</a></li>
						        </ul>
					      	</div><!-- /btn-group -->
					      	<input type="text" class="form-control" placeholder="请输入搜索内容" value="${sessionScope.deptName}${sessionScope.illnessName}">
					      	<span class="input-group-addon" style="background-color:#f0ad4e;cursor: pointer;" onclick="searchDoc(this)" >
						      	<span class="glyphicon glyphicon-search "></span>
					      	</span>
					     </div>
				    </form>
				</div>
			</shiro:guest>
			<shiro:hasRole name="patient">
				<div class="col-sm-6" style="margin-top: 15px;">
					<form method="post" name="form1" class="form form-horizontal">
						<div class="input-group">
					      	<div class="input-group-btn">
						        <button id="index_search_btn" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">${sessionScope.illnessName!=null && sessionScope.illnessName!=""?"疾病":"科室" }<span class="caret"></span></button>
						        <ul class="dropdown-menu" role="menu">
						          <li><a href="javascript:searchType('科室')">科室</a></li>
						          <li><a href="javascript:searchType('疾病')">疾病</a></li>
						        </ul>
					      	</div><!-- /btn-group -->
					      	<input type="text" class="form-control" placeholder="请输入搜索内容" value="${sessionScope.deptName}${sessionScope.illnessName}">
					      	<span class="input-group-addon" style="background-color:#f0ad4e;cursor: pointer;" onclick="searchDoc(this)" >
						      	<span class="glyphicon glyphicon-search "></span>
					      	</span>
					     </div>
				    </form>
				</div>
			</shiro:hasRole>
		</div>
	
		<!--
        	作者：石洪刚
        	时间：2017年8月10日17:04:47
        	描述：导航条   游客可见(在dashboard页) ：按科室挂号  按疾病挂号  最新公告
        -->
		<div class="container" style="margin-top: 10px;">
			<ul class="nav nav-pills guahao" role="tablist" style="background-color:lightcyan">
			  	<li class="active"><a href="#">首页</a></li>
			  	<%
			  		Subject currentUser = SecurityUtils.getSubject();
			  		List menuList = (ArrayList)currentUser.getSession().getAttribute(SessionConst.SESSION_MENULIST);
			  		SysMenu currentMenu = (SysMenu)currentUser.getSession().getAttribute(SessionConst.SESSION_MENU);
			  		if(currentMenu==null){
			  			currentMenu = new SysMenu();
			  		}
			  		for(int i=0;i<menuList.size();i++){
			  			SysMenu topMenu = (SysMenu)menuList.get(i);
			  	%>
					<li >
						<a href="javascript:showMenu('<%=topMenu.getMenuId()%>')">
							<%=topMenu.getMenuName() %>
						</a>
					</li>
				<%
			  		}
				%>
			</ul>
		</div>
		<!-- 图片广告宣传区 -->
		<div class="swiper-container" id="mySwiper" style="width:84.7%;height:300px">
		  <div class="swiper-wrapper">
		 	 <c:forEach items="${imgSrcs }"  varStatus="i" var="src">
		      	 <div class="swiper-slide">
			         <img src="${src}" style="width: 100%;height:100%;" class="img-responsive">
			     </div>
		     </c:forEach>
		  </div>
		  <div class="swiper-pagination"></div>
		</div>
		<!-- 简介区 -->
		<div class="container">
			<div class="kuang col-sm-6">
				<h3 class="text-primary" >${hospital.hospitalName }</h3>
				<p class="">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					${hospital.hospitalInfo }
				</p>
				<div >
					
				</div>
				<div class="">
					<h5>我院地址<span class="glyphicon glyphicon-hand-down"></span></h5>
					<div style="width:100%;height:300px;border:#ccc solid 1px;" id="dituContent"></div>
				</div>
			</div>
			<div class="kuang col-sm-6">
				<h3 class="text-primary" >我院大事记</h3>
				<ul>
					<c:forEach items="${bigthingList }" var="bigthing">
						<li><a href="/baseinfo/pageFrontBigthing?id=${bigthing.bigthingId }"><fmt:formatDate value="${bigthing.bigthingTime }" pattern="yyyy年"/>：${bigthing.bigthingTitle }</a></li>
					</c:forEach>
				</ul>
				<div class="text-right">
					<a href="baseinfo/query">查看更多>></a>
				</div>
			</div>
		</div>
		<!-- 广告区 -->
		<div class="container">
			<div class="col-sm-4 kuang" style="height: 200px;">
				<div class="text-center" style="margin-top: 100px;">
					广告区
				</div>
			</div>
			<div class="col-sm-4 kuang" style="height: 200px;">
				<div class="text-center" style="margin-top: 100px;">
					广告区
				</div>
			</div>
			<div class="col-sm-4 kuang" style="height: 200px;">
				<div class="text-center" style="margin-top: 100px;">
					广告区
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	
		//使用swiper
		var mySwiper = new Swiper('#mySwiper', {
			autoplay: 2000,//可选选项，自动滑动
			autoplayDisableOnInteraction : false,
			loop:true,
			speed:1000,
			effect : 'cube',
			pagination : '.swiper-pagination',
		})
		//创建和初始化地图函数：
	    function initMap(){
	        createMap();//创建地图
	        setMapEvent();//设置地图事件
	        addMapControl();//向地图添加控件
	        addMarker();//向地图中添加marker
	    }
	    //创建地图函数：
	    function createMap(){
	        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
	        var point = new BMap.Point(126.626189,45.744179);//定义一个中心点坐标
	        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
	        window.map = map;//将map变量存储在全局
	    }
	    
	    //地图事件设置函数：
	    function setMapEvent(){
	        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
	        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
	        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
	        map.enableKeyboard();//启用键盘上下左右键移动地图
	    }
	    
	    //地图控件添加函数：
	    function addMapControl(){
	        //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	        //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	        //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
	    }
	    
	    //标注点数组
	    var markerArr = [{title:"图灵云在此处",content:"医院地址",point:"126.625228|45.742789",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
			 ];
	    //创建marker
	    function addMarker(){
	        for(var i=0;i<markerArr.length;i++){
	            var json = markerArr[i];
	            var p0 = json.point.split("|")[0];
	            var p1 = json.point.split("|")[1];
	            var point = new BMap.Point(p0,p1);
				var iconImg = createIcon(json.icon);
	            var marker = new BMap.Marker(point,{icon:iconImg});
				var iw = createInfoWindow(i);
				var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
				marker.setLabel(label);
	            map.addOverlay(marker);
	            label.setStyle({
	                        borderColor:"#808080",
	                        color:"#333",
	                        cursor:"pointer"
	            });
				(function(){
					var index = i;
					var _iw = createInfoWindow(i);
					var _marker = marker;
					_marker.addEventListener("click",function(){
					    this.openInfoWindow(_iw);
				    });
				    _iw.addEventListener("open",function(){
					    _marker.getLabel().hide();
				    })
				    _iw.addEventListener("close",function(){
					    _marker.getLabel().show();
				    })
					label.addEventListener("click",function(){
					    _marker.openInfoWindow(_iw);
				    })
					if(!!json.isOpen){
						label.hide();
						_marker.openInfoWindow(_iw);
					}
				})()
	        }
	    }
	    //创建InfoWindow
	    function createInfoWindow(i){
	        var json = markerArr[i];
	        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
	        return iw;
	    }
	    //创建一个Icon
	    function createIcon(json){
	        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
	        return icon;
	    }
	    
	    initMap();//创建和初始化地图
	    
		
	</script>
</html>